<template>
    <div class="view">
        <Select v-model="SelectValue.province" style="width: 200px" @on-change="provinceChange">
            <Option v-for="item in provinceList" :value="item.cityCode" :key="item.cityCode">
                {{ item.cityName }}
            </Option>
        </Select>

        <br /><br />

        <Select v-model="SelectValue.city" style="width: 200px" @on-change="cityChange">
            <Option v-for="item in cityList" :value="item.cityCode" :key="item.cityCode">
                {{ item.cityName }}
            </Option>
        </Select>

        <br /><br />

        <Select v-model="SelectValue.district" style="width: 200px">
            <Option v-for="item in districtList" :value="item.cityCode" :key="item.cityCode">
                {{ item.cityName }}
            </Option>
        </Select>
        <code>
            <pre>{{ this.SelectValue }}</pre>
        </code>
    </div>
</template>

<script>
import china from '../../assets/china.json'
export default {
    data() {
        return {
            SelectValue: {
                province: '',
                city: '',
                district: ''
            },
            provinceList: china,
            cityList: [],
            districtList: []
        }
    },
    methods: {
        provinceChange(val) {
            for (let i = 0; i < this.provinceList.length; i++) {
                const element = this.provinceList[i]
                if (element.cityCode == val) {
                    this.cityList = element.children
                    break
                }
            }

            this.SelectValue.city = ''
            this.SelectValue.district = ''
            this.districtList = []
        },
        cityChange(val) {
            for (let i = 0; i < this.cityList.length; i++) {
                const element = this.cityList[i]
                if (element.cityCode == val) {
                    this.districtList = element.children
                    break
                }
            }
            this.SelectValue.district = ''
        }
    }
}
</script>
<style lang="less" scoped>

</style>
